import React, { useState } from "react";
import './style/home.scss'
import { Layout, Menu, Button } from 'antd';
import { useLocation, useNavigate, Outlet } from "react-router";
import RightContain from '../components/headerRight'

import { useSelector } from "react-redux";
import option1 from "./option/options2";

export default function Home() {
  const { Header, Sider, Content } = Layout;
  const location = useLocation()
  const navigate = useNavigate()
  // const { routes } = useSelector(state => state)
  // console.log(location.state.token) // 获取传递路由传递的参数
  // 收缩菜单
  const [collapsed, setCollapsed] = useState(false)
  const toCollapsed = () => {
    setCollapsed(!collapsed)
  }
  // 点击子菜单，对应的路由跳转
  const onSelect = (e) => {
    console.log(routes);
    let arr = e.keyPath.reverse()
    let path = arr.join('/')
    navigate(path)
  }

  const routes = [
    { label: 'option1', key: 'option1' },
    {
      label: 'option2', key: 'option2', children: [
        { label: 'option21', key: 'option21' }
      ]
    },
    {
      label: 'option3', key: 'option3', children: [
        { label: 'option21', key: 'option31' },
        { label: 'option32', key: 'option32' },
        { label: 'option33', key: 'option33' },
      ]
    },
  ]


  const [openKeys, setOpenKeys] = useState([]);
  const rootSubmenuKeys = ['option2', 'option3', 'b4'];
  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };
  // 主题切换
  const [switchTheme, setSwitchTheme] = useState('dark')

  return (
    <div className="homeContain">
      <Layout className="layout">
        <Header style={{ 'backgroundColor': switchTheme == 'dark' ? '' : '#fff' }}>
          {/* 图片放在src下面中的引入方法，require 只能放字符串，不能写动态 */}
          {/* <img style={{width:'50px',height:'50px'}} src={[require("../assets/logo192.png")]} alt="logo192" /> */}
          {/* 图片放在public中的引入方法 */}
          <img style={{ width: '50px', height: '50px' }} src="/img/logo.png" alt="logo192" />
          <RightContain setSwitchTheme={setSwitchTheme} />
        </Header>
        <Layout className="layoutContain">
          <Sider collapsed={collapsed} theme={switchTheme}>
            <Button style={{ width: '100%' }} onClick={toCollapsed}>{collapsed ? '展开' : '收起'}</Button>
            <Menu
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              mode="inline"
              theme={switchTheme}
              items={routes}
              onClick={onSelect}
              openKeys={openKeys}
              onOpenChange={onOpenChange}
            />
          </Sider>
          <Content>
            {location.pathname === '/home' ? <div>Welcome Admin</div> : <Outlet />}
          </Content>
        </Layout>
      </Layout>
    </div>
  )
}